<template>
  <div class="table_box" ref="table">
    <tr class="table_tr table_tit">
      <th v-for="(h,hindex) in th" :key="hindex">{{ h.name }}</th>
    </tr>
    <tr v-for="(d,dindex) in td" :key="dindex" class="table_tr" @mouseover="onMouseover(dindex,$event)" @mouseleave="onMouseleave($event)">
      <td v-for="(tc,tcindex) in th" :key="tcindex" @click="onClickTable(d.DecodeID,d[tc.props],d.id)" :style="{maxWidth:tcindex==1&&typeOf=='open'?'100%':'200px',textAlign:typeOf=='open'?'left':'center'}" :class="[typeOf=='open'?'':'table_nowarp']">{{ d[tc.props] }}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name:"TableBox",
  props:{
    th:{
      type:Array,
      default:()=>{
        return []
      }
    },
    td:{
      type:Array,
      default:()=>{
        return []
      }
    },
    page:{
      type:String | Number,
      default:'0'
    },
    typeOf:{
      type:String,
      default:'table'
    }
  },
  data(){
    return {
      time:null
    }
  },
  watch:{
    td:{
      deep:true,
      handler:function () {
        if(this.page=='0')
          this.$refs['table'].scrollTop=0
      }
    }
  },
  mounted(){
    this.$refs['table'].addEventListener('scroll',this.handleScroll)
  },
  methods:{
    onMouseover(index,e){
      this.$emit('tableMouse',{x:e.pageX,y:e.pageY,index:index})
      clearTimeout(this.time);
    },
    onMouseleave(e){
      this.time = setTimeout(()=>{
        this.$emit('tableMouse',{x:e.pageX,y:e.pageY,index:null})
        clearTimeout(this.time);
      },500)
    },
    handleScroll(e){
      if((e.target.offsetHeight+e.target.scrollTop)>=e.target.scrollHeight){
        this.$emit('scrollDown')
      }
    },
    onClickTable(DecodeID,title,id){
      this.$emit('openView',DecodeID,title,id)
    }
  }
}
</script>

<style>
.table_box{
  color: #fff;
  width: 90%;
  margin: auto;
  height: calc(100% - 80px);
  overflow: hidden;
  overflow-y: auto;
  margin-top: 10px;
}
.table_box::-webkit-scrollbar{
  width: 10px;
  border-radius: 10px;
  background-color: rgba(201, 216, 246, 0.9);
}
.table_box::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(55, 83, 167)));
}
.table_box::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  /* background-color: #F5F5F5; */
  border-radius: 10px;
}
.table_tr{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  transition: .3s;
}
.table_tr>th,.table_tr>td{
  max-width: 200px;
  flex: 1;
  text-align: left;

  min-height: 45px;
  line-height: 45px;
  font-size: 16px;
  padding: 0 10px;
}
.table_nowarp{
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table_tit{
  border: 1px solid #03b3f6;
}
.table_tit>th{
  height: 37px;
  line-height: 45px;
  font-weight: 300;
  color: #03bbff;
  text-align: center;
}
.table_tr:nth-child(2n+3){
  background: rgba(50, 207, 230, .09);
}
.table_tr:hover{
  background: rgba(50, 207, 230, .2);
  cursor: pointer;
  transition: 0s;
}
</style>
